import React from 'react';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Flex } from 'antd';
import { loginApi } from '../../http/http';
import { useDispatch } from 'react-redux'
import request from '../../request/request';
import { setuse } from '../../reducers/useSlice';
const App = () => {
  const [form] = Form.useForm()

  const xinxi = useDispatch()

  const onFinish = async (values) => {
    console.log('Received values of form: ', values);
    const res = await loginApi(values)
    // console.log(res);
    const { code, token } = res.data
    if (code == 1) {
      alert('登录成功')
      localStorage.setItem('token', token)
      localStorage.setItem('username', values.username)

      const res = await request({ url: 'getUserInfo', method: 'get', data: values })
      xinxi(setuse({ name: res.data.data.name, pic: res.data.data.pic }))
      window.location.href = '/index/home'
    } else {
      alert('输入框不能为空')
    }

  };
  return (
    <Form
      form={form}
      name="login"
      initialValues={{ remember: true }}
      style={{ maxWidth: 360 }}
      onFinish={onFinish}
    >
      <Form.Item
        name="username"
        rules={[{ min: 4, max: 8, message: ' 请输入4-8位账号', trigger: 'blur' },]}
      >
        <Input prefix={<UserOutlined />} placeholder="Username" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[{ min: 3, max: 12, message: '请输入3-12位密码', trigger: 'blur' },]}
      >
        <Input.Password prefix={<LockOutlined />} type="password" placeholder="Password" />
      </Form.Item>
      <Form.Item>
        <Flex justify="space-between" align="center">
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>
          <a href="">Forgot password</a>
        </Flex>
      </Form.Item>

      <Form.Item shouldUpdate>
        {() => (
          <Button

            htmlType="submit"
            disabled={
              // !clientReady ||
              !form.isFieldsTouched(true) ||
              !!form.getFieldsError().filter(({ errors }) => errors.length).length
            }
          >
            Log in
          </Button>
        )}
      </Form.Item>
    </Form>
  );
};
export default App;